<template>
	<view class="container">
		<view class="content">
			<!-- 比赛排行榜 -->
			<view class="b_title">{{title}}</view>
			<view class="title">
				<view>{{projectName}}</view>
				<view>{{groupType}}组</view>
			</view>
			<view v-show="flag">
				<button v-show="isShow" class="paiming" @click="star">排名</button>
				<button v-show="!isShow" class="paiming" @click="over">完成</button>
			</view>
			<view class="rank">
				<view class="inner" v-for="item in list" :key="item.id">
					<view class="item">
						<span style="font-size: 14px;font-weight: 700; padding-left: 7px;">{{item.orderNumber}}</span>
						<view></view>
						<view>{{item.realName}}</view>
						<view style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.school}}</view>
						<view>{{item.result}}</view>
					</view>
					<view class="img">
						<image :src="item.imageUrl" mode=""></image>
					</view>
					<view v-show="!isShow">
						<view class="paixu b-s">
							<input type="text" value="" @click="huoqu(item.id)" @input="shuru" />
						</view>
					</view>
				</view>
			</view>
				
		</view>
	</view>
	
</template>

<script>
	import {grade,flagOrder,usersRole} from '../../apis'
	export default{
		data() {
			return{
				isShow:true,
				flag:false,
				title:'',
				list:[],
				projectName:'',
				groupType:'',
				gradeId:0,
				// order:0,
				gradeType:0,
				orderNumber:0,
				competitionId:0,
				projectId:0,
				groupTypeEnum:''
			}
		},
		onLoad(option) {
			//这里通过option可以获取从前一个页面传过来的参数，并直接将参数传给下一个接口grade调用
			this.title = JSON.parse(option.queryData).title
			this.projectName = JSON.parse(option.queryData).projectName
			this.gradeType = JSON.parse(option.queryData).gradeType
			this.competitionId= JSON.parse(option.queryData).competitionId,
			this.projectId=JSON.parse(option.queryData).projectId,
			this.groupTypeEnum=JSON.parse(option.queryData).groupTypeEnum
			switch(JSON.parse(option.queryData).groupTypeEnum){
				case "XIAOXUE":
				this.groupType = '小学';
				break;
				case "CHUZHONG":
				this.groupType = '初中';
				break;
				case "GAOZHONG":
				this.groupType = '高中';
				break;
				case "DAXUE":
				this.groupType = '大学';
				break;
			}
			grade({
				"competitionId": this.competitionId,
				"projectId": this.projectId,
				"groupTypeEnum":this.groupTypeEnum
			}
			).then((res)=>{
				let [err,data] = res
				// console.log(data)
				this.list = data.data.data
				console.log("list为u："+JSON.stringify(this.list))
			})
			//页面加载的时候先查询一下用户的角色和用户需要查询的项目
			usersRole().then((res)=>{
				let [err,data] = res
				console.log("用户信息为："+JSON.stringify(data.data.data))
				if(data.data.data == "admin" && this.gradeType == 3){
					this.flag = true
				}
			})
		},
		methods:{
			huoqu(id){
				// 获得gradeId
				// this.gradeId = e.detail.value
				console.log("gradeId为："+id)
				 this.gradeId = id
			},
			shuru:function(e){
				// this.order = e.detail.value
				// console.log("id为id："+id)
				// console.log("胜或负为："+e.detail.value)
				 // this.orderNumber = e.detail.value
				 flagOrder([
				 	{
				 		"gradeId": this.gradeId,
				 		"order": e.detail.value
				 	}
				 ]).then((res)=>{
				 	let [err,data] = res
				 	console.log(data)
				 	if(data.data.code ==200){
						grade({
							"competitionId": this.competitionId,
							"projectId": this.projectId,
							"groupTypeEnum":this.groupTypeEnum
						}
						).then((res)=>{
							let [err,data] = res
							this.list = data.data.data
						})
				 	}else{
				 		uni.showToast({
				 			title:'data.data.message',
				 			icon:'none'
				 		})
				 	}
				 })
			},
			star(){
				this.isShow = false
			},
			over(){
				this.isShow = true
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.content{
		position: relative;
		.paiming{
			width: 20%;
			right: 0;
			font-size: 14px;
			background-color: #ccc;
			position: absolute;
			top: 0;
			opacity: 0.4;
		}
		.b_title{
			margin-top: 10px;
			font-size: 16px;
			font-weight: 900;
			text-align: center;
		}
		.title{
			display: flex;
			font-size: 14px;
			font-weight: 900;
			justify-content: space-between;
			margin-bottom: 10px;
			margin-top: 10px;
			view{
				flex: 3;
				text-align: center;
				
			}
		}
		.rank{
			border: 1px solid #cdcccc;
			.inner{
				border-bottom: 1px dashed #cdcccc;
				margin: 5px;
				position: relative;
				.item{
					width: 97%;
					margin-top: 40px;
					display: flex;
					text-align: center;
					padding-bottom: 10px;
					view{
						flex: 4;
					}
				}
				.img{
					position: absolute;
					top: -30px;
					left: 35px;
					width: 15%;
					height: 50px;
					image{
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
				.paixu{
					position: absolute;
					top: -39px;
					right: 0;
					background-color: #ccc;
					width: 20%;
					height: 30px;
					input{
						text-align: center;
						font-size: 12px;
						font-weight: 700;
						color: red;
						width: 100%;
						height: 100%;
					}
				}
			}
			
		}
	}
</style>
